frontend/index.html (1)

9-14: Consider using modern font loading strategies.

The Google Fonts links are correctly preconnected, but for better performance, consider using font-display: swap in your CSS or switching to self-hosted fonts to eliminate the external dependency and improve Core Web Vitals.

frontend/src/index.css (1)

522-528: Replace custom CSS classes with Tailwind utilities.

Adding custom .confirmationModal and .confirmationModalBtn classes contradicts the Tailwind CSS approach you've adopted. These simple padding and width styles should use Tailwind utilities directly:

• .confirmationModal (padding: 1rem) → use p-4 class
• .confirmationModalBtn (padding: 5px; width: 5rem) → use px-1.5 py-1 w-20 classes

Mixing custom CSS with Tailwind utilities reduces consistency and makes the codebase harder to maintain.

♻️ Remove custom classes and use Tailwind utilities

Remove these CSS rules:

-}
-.confirmationModal{
-  padding: 1rem;
-}
-.confirmationModalBtn{
-      padding: 5px;
-    width: 5rem;
-
 }

Then update ConfirmationModal.jsx to use Tailwind classes directly:

-        className="bg-white w-[380px] rounded-2xl shadow-lg px-6 py-5 confirmationModal"
+        className="bg-white w-[380px] rounded-2xl shadow-lg px-6 py-5 p-4"

-            className="px-4 py-2 text-sm rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 confirmationModalBtn"
+            className="px-4 py-2 text-sm rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 w-20"

(Note: Verify exact spacing needs and adjust classes accordingly)

frontend/src/pages/ConfirmationModal.jsx (1)

1-50: Add prop validation for better developer experience.

Since you're using React 19 without TypeScript, consider adding runtime prop validation with prop-types to catch integration errors early.

📝 Add PropTypes

Install prop-types:

npm install prop-types

Then add to the component:

 import React, { useEffect, useRef } from "react";
 import { AlertTriangle } from "lucide-react";
+import PropTypes from "prop-types";

 function ConfirmationModal({ open, title, message, onConfirm, onCancel, confirmLabel, cancelLabel }) {
   // ...
 }

+ConfirmationModal.propTypes = {
+  open: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  confirmLabel: PropTypes.string,
+  cancelLabel: PropTypes.string
+};
+
 export default ConfirmationModal;

frontend/src/pages/ProjectSettings.jsx (6)

69-73: Remove commented-out code.

Leaving commented code in production degrades maintainability. If you need to preserve this for reference, document it in a commit message or comment explaining why the native confirm() was removed.

🧹 Remove dead code

   const handleDeleteProject = async () => {
     if (deleteConfirm !== project.name)
       return toast.error("Project name does not match");

-    // // if (
-    // //   !confirm("Final warning: This will delete the project and all its data.")
-    // // )
-    //   return;
-
     try {

---

26-42: Add error handling for network failures.

The fetchProject function logs errors via toast but doesn't handle specific failure scenarios. Consider:

1. 401/403: Token expired or unauthorized → redirect to login
2. 404: Project not found → redirect to dashboard with message
3. Network error: Retry mechanism or offline indicator

🔧 Enhanced error handling

   useEffect(() => {
     const fetchProject = async () => {
       try {
         const res = await axios.get(`${API_URL}/api/projects/${projectId}`, {
           headers: { Authorization: `Bearer ${token}` },
         });
         setProject(res.data);
         setNewName(res.data.name);
-      } catch {
-        toast.error("Failed to load project");
+      } catch (err) {
+        if (err.response?.status === 401 || err.response?.status === 403) {
+          toast.error("Session expired. Please log in again.");
+          navigate("/login");
+        } else if (err.response?.status === 404) {
+          toast.error("Project not found");
+          navigate("/dashboard");
+        } else {
+          toast.error("Failed to load project");
+        }
       } finally {
         setLoading(false);
       }
     };
     fetchProject();
   }, [projectId, token, navigate]);

---

45-63: Validate project name format and length.

The current validation only checks for empty/whitespace names. Consider adding:

• Minimum/maximum length constraints
• Character restrictions (e.g., no special characters if your backend doesn't support them)
• Trim whitespace before submission

✅ Add comprehensive validation

   const handleRename = async () => {
-    if (!newName.trim()) return toast.error("Project name cannot be empty");
+    const trimmedName = newName.trim();
+    
+    if (!trimmedName) {
+      return toast.error("Project name cannot be empty");
+    }
+    
+    if (trimmedName.length < 3) {
+      return toast.error("Project name must be at least 3 characters");
+    }
+    
+    if (trimmedName.length > 50) {
+      return toast.error("Project name must be less than 50 characters");
+    }

     setRenaming(true);
     try {
       await axios.patch(
         `${API_URL}/api/projects/${projectId}`,
-        { name: newName },
+        { name: trimmedName },
         { headers: { Authorization: `Bearer ${token}` } }
       );
       toast.success("Project renamed successfully!");
-      setProject((prev) => ({ ...prev, name: newName }));
+      setProject((prev) => ({ ...prev, name: trimmedName }));
+      setNewName(trimmedName); // Update state with trimmed version
     } catch {

---

304-467: Consider extracting DatabaseConfigForm to a separate file.

This component is 160+ lines and handles its own state and API logic. Keeping it in the same file as ProjectSettings reduces modularity and makes testing harder.

Recommendation: Extract to frontend/src/components/DatabaseConfigForm.jsx (same for StorageConfigForm).

---

311-314: useEffect dependency may cause unnecessary rerenders.

This effect runs whenever project changes, which happens on every fetch or optimistic update. If project is a large object, this could cause performance issues.

Consider using a more specific dependency or memoizing the check:

⚡ Optimize dependency

   useEffect(() => {
-    const configured = project?.resources?.db?.isExternal || false;
-    setShowForm(!configured);
-  }, [project]);
+    setShowForm(!(project?.resources?.db?.isExternal || false));
+  }, [project?.resources?.db?.isExternal]);

This way the effect only runs when the actual configuration status changes, not on every project update.

---

316-336: Add loading state feedback and disable form during submission.

The form doesn't disable inputs while loading is true, allowing users to modify values mid-submission, potentially causing race conditions.

🔒 Disable form during submission

             <input
               type="password"
               className="input-field"
               placeholder="mongodb+srv://user:pass@cluster.mongodb.net/..."
               value={dbUri}
               onChange={(e) => setDbUri(e.target.value)}
+              disabled={loading}
               style={{

Also consider showing a loading spinner or progress indicator for better UX.

frontend/src/pages/Database.jsx (3)

99-115: Delete confirmation should await deletion (or show pending state) before closing.

Right now onConfirm fires handleDelete(selectedId); and immediately closes the modal (Lines 308-311), which can feel “successful” even if the request fails.

Proposed fix (await + basic guard)

          <ConfirmationModal
            open={showModal}
            title="Delete Record"
            message="Are you sure you want to delete this record? This action cannot be undone."
-           onConfirm={() => {
-             handleDelete(selectedId);
-             setShowModal(false);
-           }}
+           onConfirm={async () => {
+             if (!selectedId) return;
+             await handleDelete(selectedId);
+             setShowModal(false);
+             setSelectedId(null);
+           }}
-           onCancel={() => setShowModal(false)}
+           onCancel={() => {
+             setShowModal(false);
+             setSelectedId(null);
+           }}
          />

Also applies to: 303-313

---

456-495: Add-document modal: add basic dialog a11y hooks (role/aria + Escape/backdrop behavior).

This overlay/modal structure currently lacks obvious role="dialog", aria-modal="true", and Escape-to-close handling (Lines 456-495). Even a minimal pass would help.

---

497-861: Consider moving the large inline <style> block to a stylesheet (or Tailwind utilities).

Keeping ~300+ lines of CSS inside the component makes the page harder to maintain and increases the chance of global selector collisions.

Configuration used: defaults

Review profile: CHILL

Plan: Pro

frontend/src/pages/ProjectSettings.jsx (1)

286-297: Simplify modal rendering logic.

The modal is both conditionally rendered ({showModal && ...}) and receives open={showModal}. This is redundant and prevents smooth animations/transitions.

♻️ Recommended approach

Remove the conditional rendering and let the modal's open prop control visibility:

           <Trash2 size={18} /> Permanently Delete Project
         </button>
-        {showModal && (
-          <ConfirmationModal
-            open={showModal}
-            title="Delete Project"
-            message="Are you sure you want to delete this project? This action cannot be undone."
-            onConfirm={() => {
-              handleDeleteProject();
-              setShowModal(false);
-            }}
-            onCancel={() => setShowModal(false)}
-          />
-        )}
+        <ConfirmationModal
+          open={showModal}
+          title="Delete Project"
+          message="Are you sure you want to delete this project? This action cannot be undone."
+          onConfirm={() => {
+            handleDeleteProject();
+            setShowModal(false);
+          }}
+          onCancel={() => setShowModal(false)}
+        />
       </div>
     </div>

This allows the ConfirmationModal to handle enter/exit transitions smoothly.

Configuration used: defaults

Review profile: CHILL

Plan: Pro